<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="/static/css/amazeui.css">
        <script src="/static/js/amazeui.js"></script>
        <script src="/static/js/vue.min.js"></script>
        <script src="/static/js/jquery.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
                border:0;
            }
            *,
            *:before,
            *:after {
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }
            *.video-tag {
                height: auto;
                width: 100%;
                overflow: hidden;
                height: 40rem;
                object-fit: cover;
            }
            p {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        </style>
    </head>
    <body id="app" style="background-color:rgb(229, 226, 226);">
        <div style="text-align: center; padding-top: 15rem;"><h1 style="font-size: 4rem;">xxx</h1></div>
        <div style="text-align: center;"><h4>xxxx</h4></div>

        <div class="am-g" style="padding-top: 3rem;">
            
            <div class="am-u-sm-1"></div>
            <div class="am-u-sm-10 am-u-sm-centered">
                <form class="am-form-group am-u-sm-centered" action="/api/upload_video" enctype="multipart/form-data" method="post" style="background-color: white; padding: 0.3rem; text-align: center;">
                    <button id="form_button" type="button" v-on:click="easyUpload" class="am-btn am-btn-default am-btn-sm">
                    <i class="am-icon-cloud-upload"></i>上传</button> 
                    <div class="am-btn-sm">状态: {{status}}</div>
                    <!-- 点击上传母狗:<input type="file" name="video" multiple/><br> -->
                    <!-- <button type="button" class="am-btn am-btn-default am-round">默认样式</button> -->
                    <!-- <button type="submit" class="am-btn am-btn-default am-btn-sm">上传</button> --> 
                    <!-- <button type="submit" style="background-color: teal;">上传</button> -->
                </form>

                <h4 id="test">官方视频</h4>
                <ul class="am-avg-sm-1 am-thumbnails am-avg-md-1 am-avg-lg-2">
                    <li v-for="movie in movies">
                        <video class="am-thumbnail video-tag" controls="true">
                            <source src="{{web_url}}/{{movie}}" type="video/ogg">
                            <source src="{{web_url}}/{{movie}}" type="video/mp4">
                            <source src="{{web_url}}/{{movie}}" type="video/webm">
                            <object data="{{web_url}}/{{movie}}">
                                <embed src="{{web_url}}/{{movie}}">
                            </object>
                        </video>
                        <!-- <video class="am-thumbnail video-tag" controls="true" src="/Users/zhaoshicheng/files/awang/{{movie}}"></video> -->
                    </li>
                </ul>

                <h4>用户视频</h4>
                <ul class="am-avg-sm-1 am-thumbnails am-avg-md-1 am-avg-lg-4">
                    <li v-for="movie in userMovies" v-if='((movie.Image) != "")'>
                        <a href="{{web_url}}/{{movie.Urls}}" >
                            <img src="{{web_url}}/{{movie.Image}}" class="am-thumbnail video-tag am-img-responsive" alt="" srcset="">
                            <p class="am-kai">{{movie.Name}}</p>
                        </a>
                        <!-- <video class="am-thumbnail video-tag" controls="true">
                            <source src="{{web_url}}/{{movie.Urls}}" type="video/ogg">
                            <source src="{{web_url}}/{{movie.Urls}}" type="video/mp4">
                            <source src="{{web_url}}/{{movie.Urls}}" type="video/webm">
                            <object data="{{web_url}}/{{movie.Urls}}">
                                <embed src="{{web_url}}/{{movie.Urls}}">
                            </object>
                        </video> -->
                    </li>
                </ul>

            </div>
            <div class="am-u-sm-1"></div>
          </div>
    </body>
    <script>
        new Vue({
            el: '#app',
            data: {
                movies: [],
                playing: null,
                web_url: "http://localhost:10300",
                status: "无操作",
                scale: 0.8,
                imgData: NaN,
                userMovies: [],
            },
            methods: {
                reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('')
                },
                playMovie: function(vid) {
                    var self = this;
                    if(self.playing != vid){
                        $(".video-tag").each(function(){
                            this.pause();
                        });
                        self.playing = vid;
                        vid.play();
                    }
                },
                easyUpload: function(){
                    var self = this;
                    self.status = "准备上传";
                    // $("#form_button").hide();
                    var input = document.createElement("input");
                    input.type = "file";
                    input.click();
                    input.onchange = function(){
                        self.getPics(input);
                        // console.log("img", self.imgData)
                        // // while (isNaN(self.imgData)) {
                        // setTimeout(function(){ self.postMess(self, file) }, 10);
                        // };
                    };
                    if (self.status == "准备上传") {
                        self.status = "无操作";
                    }
                    // input.remove();
                    // self.imgData=NaN;
                },
                postMess: function(self, input){
                    console.log("x");
                    console.log(1);
                    console.log(self.imgData);
                    var file = input.files[0];
                    var form = new FormData();
                    form.append("pic", self.imgData);
                    form.append("video", file); //第一个参数是后台读取的请求key值
                    // form.append("fileName", file.name);
                    // form.append("other", "666666"); //实际业务的其他请求参数
                    var xhr = new XMLHttpRequest();
                    var action = "/api/upload_video"; //上传服务的接口地址
                    xhr.open("POST", action);
                    xhr.send(form); //发送表单数据
                    xhr.onreadystatechange = function(){
                        if(xhr.readyState==4 && xhr.status==200){
                            var resultObj = JSON.parse(xhr.responseText);
                            // $("#form_button").show();
                            self.status = "上传成功";
                        }else if(xhr.readyState != 4){
                            self.status = "上传中";
                        }else {
                            // $("#form_button").show();
                            self.status = "上传失败";
                        }
                    }
                },
                // createVideo: function()
                getFileURL: function(file) {
                    var getUrl = null;
                    if(window.createObjectURL != undefined) { // basic
                        getUrl = window.createObjectURL(file);
                    } else if(window.webkitURL != undefined) { // webkit or chrome
                        getUrl = window.webkitURL.createObjectURL(file);
                    } else if(window.URL != undefined) { // mozilla(firefox)
                        getUrl = window.URL.createObjectURL(file);
                    }
                    return getUrl;
                },
                getPics:function(input){
                    var self = this;
                    var file = input.files[0];
                    var videoUrl = this.getFileURL(file);
                    video = document.createElement("video");
                    video.setAttribute("src", videoUrl);
                    video.setAttribute("style", 'opacity: 0;position: fixed;z-index: -5;');
                    video.load();
                    $("#test").before(video)
                    video.addEventListener('canplaythrough',function(){
                        self.captureImage(input, video);
                    }, 100);
                },
                captureImage: function(input, video) {
                    self = this;
                    var canvas = document.createElement("canvas");
                    canvas.width = video.videoWidth * self.scale;
                    canvas.height = video.videoHeight * self.scale;
                    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
                    self.imgData = canvas.toDataURL("image/jpg")
                    var img = document.createElement("img");
                    img.src = canvas.toDataURL("image/jpg");
                    video.remove();
                    canvas.remove();
                    img.remove();
                    self.postMess(self, input)
                },
                url_bool: function(url){
                    console.log(url)
                    if (url != ""){
                        return true
                    }else{
                        return false
                    }
                }
            },
            beforeCompile: function () {
                var self = this;
                $.get(self.web_url + "/api/get_path_video",function(data,status){
                    self.movies = data.split(",").slice(0,-1)
                });
                $.get(self.web_url + "/api/get_video?page=0",function(data,status){
                    self.userMovies = data
                });
            },
            ready: function() {
                var self = this;
                setTimeout(function(){
                    $(".video-tag").each(function(){
                        this.addEventListener('play', function(){
                            self.playMovie(this)
                        })
                    });
                }, 3);
            }
        })
    </script>
</html>



